<template>
    <div class="home-content">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i> 个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>流程指引</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <label style="color:gray;">Tip:完成过的步骤可以点击流程线快速进入呦</label><a style="color:red;margin-left: 55%;" href="/#/gooList"><<返回列表</a>
        <div class="crumbs">
            <el-steps space="45%" :active="curActive" finish-status="success" process-status="finish">
                <i @click="entrySteps('GooInfo')">
                    <el-step title="信息录入" icon="edit"></el-step>
                </i>
                <i @click="entrySteps('GooDetail')">
                    <el-step title="详情设置" icon="setting"></el-step>
                </i>
                <i @click="entrySteps('GooRelease')">
                    <el-step title="发布管理" icon="upload"></el-step>
                </i>
            </el-steps>
            <transition name="bounce" mode="out-in">
                <component v-bind:is="curView" v-on:retrieve-cur-step="getCurActive"></component>
            </transition>

        </div>

    </div>
</template>

<script>

import GooInfo from './GooInfo.vue';
import GooDetail from './GooDetail.vue';
import GooRelease from './GooRelease.vue';
export default {
    data() {
        return {
            gooItemId: 1,
            curView: 'GooInfo',
            secondStepClick: false,
            threeStepClick: false,
            curActive: 0
        }
    },
    components: {
        GooDetail, GooInfo, GooRelease
    },
    mounted: function() {
        var gooItem = this.$store.state.gooItem.gooItem;
        if (gooItem) {
            this.getCurActive(gooItem.steps);
        }
    },
    methods: {
        getCurActive(obj) {
            console.log('当前的步骤值：' + obj)
            this.curActive = obj;
            switch (this.curActive) {
                case 1:
                    this.secondStepClick = true;
                    this.curView = 'GooDetail';
                    break;
                case 2:
                    this.secondStepClick = true;
                    this.threeStepClick = true;
                    this.curView = 'GooRelease';
                    break;
                case 3:
                    this.secondStepClick = true;
                    this.threeStepClick = true;
                    this.curView = 'GooRelease';
                    break;
                default:
                    break;
            }
        },
        entrySteps(value) {
            if (value == 'GooInfo') {
                this.curView = value;
            } else if (value == 'GooDetail' && this.secondStepClick) {
                this.curView = value;
            } else if (value == 'GooRelease' && this.threeStepClick) {
                this.curView = value;
            }
        }
    }
}
</script>

<style scoped>
.bounce-enter-active {
    animation: slideInRight .10s;
}

.bounce-leave-active {
    animation: slideInLeft .5s reverse;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    animation-name: slideInRight;
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
}
</style>
